<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" /> -->

    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <title>生命数字</title>
    <link rel="stylesheet" href="css/vant.css">
    <link rel="stylesheet" href="css/lifeNumber.css">
    <script src="./js/atest.js"></script>
    <script src="./js/js-calendar-converter.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <div :class="testflag?'mian1':'mian' ">
            <div class="title1">生命数字</div>
            <div class="title2">你的性格基因密码</div>
            <div class="selectBox1">
                姓名：<input type="text" v-model="userName" placeholder="请输入姓名">
            </div>
            <div class="selectBox">
                <template v-if="birthDay==''">
                    <div class="selectBtn" @click="showHandle('阴历')">阴历</div>
                    <div class="selectBtn" @click="showHandle('阳历')">阳历</div>
                </template>
                <div v-else @click="showHandle('res')">{{selectTip}}：{{birthDay}}</div>
                <!-- {{birthDay==''?'点击选择您的出生日期（${selectTip}）':`出生日期：${birthDay}`}} -->
            </div>
            <div class="subBtn" @click="getNum" v-if="!testflag">开始测试</div>
            <img src="./img/testBG.png" class="bgImg">
        </div>
        <!-- testflag -->
        <div class="resultBox" v-if="testflag">
            <div class="resTop">
                <div class="sanjiao">
                    <div class="numBox">{{this.num1}}</div>
                    <div class="numBox"><span>{{this.num2}}</span><span>{{this.num3}}</span></div>
                    <div class="numBox">
                        <span>{{this.num4}}</span><span>{{this.num5}}</span><span>{{this.num6}}</span><span>{{this.num7}}</span>
                    </div>
                    <div class="numBox numBox1"><span>日</span><span>月</span><span class="yearTip">年</span></div>
                    <div class="borline borline1"></div>
                    <div class="borline borline2"></div>
                    <div class="borline borline3"></div>
                    <div class="borline borline4"></div>
                    <div class="borline borline5"></div>
                    <div class="yuan1"></div>
                    <div class="yuan2"></div>
                </div>
                <div class="num">
                    <img src="./img/numBottom.png" alt="">
                    <span>您的生命数字为</span>
                    <span>{{this.num1}}</span>
                </div>
                <img src="./img/resultImg.png" class="resImg">
            </div>
            <div class="resCon">
                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>内驱力与其他特质</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        <div>您的内驱力为 <span class="ageTip">{{nTotal}} — {{nTotalAll}}</span></div>
                        <div>您的其他特质为 <span class="ageTip">{{oTotal}} — {{oTotalAll}}</span></div>
                    </div>
                </div>

                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>高峰低谷期</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <div>
                        <div class="imageBox">
                            <img src="./img/AlifeImg.png">
                            <div class="gaoList">
                                <span v-for="(item,index) in gaoList">{{item.num}}</span>
                            </div>
                            <div class="diList">
                                <span v-for="(item,index) in diList">{{item.num}}</span>
                            </div>
                            <div class="zhuanList">
                                <span>{{36- this.num1}}</span>
                                <span>{{45- this.num1}}</span>
                                <span>{{54- this.num1}}</span>
                            </div>
                        </div>
                        <div class="listBox">
                            <div>
                                <div><span>第一高峰</span> <span>{{gaoList[0].num}} ({{gaoList[0].key}})</span></div>
                                <div><span>第一低谷</span> <span>{{diList[0].num}} ({{diList[0].key}})</span></div>
                            </div>
                            <div>
                                <div><span>第二高峰</span> <span>{{gaoList[1].num}} ({{gaoList[1].key}})</span></div>
                                <div><span>第二低谷</span> <span>{{diList[1].num}} ({{diList[1].key}})</span></div>
                            </div>
                            <div>
                                <div><span>第三高峰</span> <span>{{gaoList[2].num}} ({{gaoList[2].key}})</span></div>
                                <div><span>第三低谷</span> <span>{{diList[2].num}} ({{diList[2].key}})</span></div>
                            </div>
                            <div>
                                <div><span>第四高峰</span> <span>{{gaoList[3].num}} ({{gaoList[3].key}})</span></div>
                                <div><span>第四低谷</span> <span>{{diList[3].num}} ({{diList[3].key}})</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>人生转折点</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        <div>您的第一次人生转折点为 <span class="ageTip">{{36- this.num1}}</span>岁</div>
                        <div>您的第二次人生转折点为 <span class="ageTip">{{45- this.num1}}</span>岁</div>
                        <div>您的第三次人生转折点为 <span class="ageTip">{{54- this.num1}}</span>岁</div>
                    </div>
                </div>
                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>正面</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        {{result.zhengKeyWords}}
                    </div>
                </div>
                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>负面</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        {{result.fuKeyWords}}
                    </div>
                </div>
                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>优势</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        {{result.ysh}}
                    </div>
                </div>
                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>劣势</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        {{result.lsh}}
                    </div>
                </div>
                <div class="resItem">
                    <div>
                        <img src="./img/resTip.png"><span>个性特征</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        {{result.gxtz}}
                    </div>
                </div>
                <div class="resItem" v-if="result.gsh!=''">
                    <div>
                        <img src="./img/resTip.png"><span>尝试改善</span>
                        <div></div>
                        <div> <span></span><span></span></div>
                    </div>
                    <img src="./img/resIcon.png" class="imgBox" alt="">
                    <div>
                        {{result.gsh}}
                    </div>
                </div>
            </div>
            <div class="subBtn1" @click="resHandle" v-if="testflag">重新测试</div>
        </div>

        <van-popup v-model="show" position="bottom">
            <van-datetime-picker v-model="currentDate" @confirm="confirm" @cancel="cancel" type="date"
                :title=`选择出生日期（${selectTip}）` :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
        </van-popup>


    </div>



    <script src="js/vue.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ajax.js"></script>
    <script src="js/pinYin.js"></script>

    <script>

        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                minDate: new Date(1900, 0, 1),
                maxDate: new Date(),
                currentDate: new Date(),
                show: false,
                birthDay: '',
                testflag: false,
                year: '',
                year1: '',
                year2: '',
                month: '',
                day: '',
                numList: [],
                num1: '',
                num2: '',
                num3: '',
                num4: '',
                num5: '',
                num6: '',
                num7: '',
                selectTip: '',

                keyWordList1: ['领导', '沟通', '行动', '策划', '方向', '财富、智慧', '人缘、贵人', '责任', '机会、认同、成功'],
                keyWordList2: ['自我为中心', '犹豫不决', '冲动', '心直口快', '固执', '胆小', '缓慢', '压力', '贪心'],
                //高峰
                gaoList: [{
                    num: 0, key: ''
                }, {
                    num: 0, key: ''
                }, {
                    num: 0, key: ''
                }, {
                    num: 0, key: ''
                }],
                //低谷
                diList: [{
                    num: 0, key: ''
                }, {
                    num: 0, key: ''
                }, {
                    num: 0, key: ''
                }, {
                    num: 0, key: ''
                }],

                formatter(type, val) {
                    if (type === 'year') {
                        return val + '年';
                    }
                    if (type === 'month') {
                        return val + '月';
                    }
                    if (type === 'day') {
                        return val + '日';
                    }
                    return val;
                },
                resList: list,
                pinyin: pinyin,
                result: '',
                userName: '',
                // 字母对应积分
                numList: [{
                    num: 1,
                    code: ['A', 'J', 'S']
                },
                {
                    num: 2,
                    code: ['B', 'K', 'T']
                },
                {
                    num: 3,
                    code: ['C', 'L', 'U']
                },
                {
                    num: 4,
                    code: ['D', 'M', 'V']
                },
                {
                    num: 5,
                    code: ['E', 'N', 'W']
                },
                {
                    num: 6,
                    code: ['F', 'O', 'X']
                },
                {
                    num: 7,
                    code: ['G', 'P', 'Y']
                },
                {
                    num: 8,
                    code: ['H', 'Q', 'Z']
                },
                {
                    num: 9,
                    code: ['I', 'R']
                },
                ],
                // 名字字符串
                nameStr: '',
                nTotal: '',
                nTotalAll: '',
                oTotal: '',
                oTotalAll: '',
            },
            created() {
            
            },
            methods: {

                showHandle(text) {
                    console.log(text)
                    if (text == 'res') {
                        // this.resHandle()
                    } else {
                        if (!this.testflag) {
                            this.selectTip = text
                            this.show = true
                        }
                    }
                },
                resHandle() {
                    this.testflag = false
                    this.currentDate = ''
                    this.birthDay = ''
                    this.userName = ''
                    this.nTotalAll = 0
                    this.oTotalAll = 0
                },
                confirm() {
                    console.log(this.currentDate);
                    var d = this.currentDate
                    var time = d.getFullYear() + '年' + this.addHandle(d.getMonth() + 1) + '月' + this.addHandle(d.getDate()) + '日'
                    console.log(time);
                    if (this.selectTip == '阴历') {
                        var timeObj = calendar.lunar2solar(d.getFullYear(), this.addHandle(d.getMonth() + 1), this.addHandle(d.getDate()))
                        console.log(timeObj);
                        this.year = timeObj.date.split('-')[0]
                        this.month = this.addHandle(timeObj.date.split('-')[1])
                        this.day = this.addHandle(timeObj.date.split('-')[2])
                        this.birthDay = timeObj.lYear + '年' + this.addHandle(timeObj.lMonth) + '月' + this.addHandle(timeObj.lDay) + '日' + '（' + this.year + '-' + this.month + '-' + this.day + '）'
                    } else {
                        this.birthDay = time
                        this.year = d.getFullYear() + ''
                        this.month = this.addHandle(d.getMonth() + 1)
                        console.log(this.month);
                        this.day = this.addHandle(d.getDate())
                    }

                    console.log(this.year);
                    console.log(this.month);
                    console.log(this.day);
                    this.show = false
                },
                cancel() {
                    this.show = false
                },
                addHandle(num) {
                    return num > 9 ? num : '0' + num
                },
                getNum() {
                    if (this.birthDay == '' || this.userName == '') {
                        alert('请填写完整信息')
                        return
                    }


                    this.testflag = true
                    this.year1 = this.year.substr(0, 2)
                    this.year2 = this.year.substr(2, 4)
                    this.num4 = this.numHandle(this.day)
                    this.num5 = this.numHandle(this.month)

                    this.num6 = this.numHandle(this.year1)
                    this.num7 = this.numHandle(this.year2)
                    this.num2 = this.numHandle(this.num4 + this.num5)
                    this.num3 = this.numHandle(this.num6 + this.num7)
                    this.num1 = this.numHandle(this.num2 + this.num3)

                    console.log(this.num1);
                    console.log(this.num2 + '----' + this.num3);
                    console.log(this.num4 + '=' + this.num5 + '----' + this.num6 + '=' + this.num7);


                    this.gaoList[0].num = this.num2
                    this.gaoList[1].num = this.numHandle(this.num3 + this.num4)
                    this.gaoList[2].num = this.numHandle(this.gaoList[0].num + this.gaoList[1].num)
                    this.gaoList[3].num = this.numHandle(this.num3 + this.num5)

                    this.diList[0].num = Math.abs(this.numHandle(this.num5 - this.num4))
                    this.diList[1].num = Math.abs(this.numHandle(this.num3 - this.num4))
                    this.diList[2].num = Math.abs(this.numHandle(this.diList[0].num - this.diList[1].num))
                    this.diList[3].num = Math.abs(this.numHandle(this.num3 - this.num5))

                    console.log(this.gaoList);
                    console.log(this.diList);

                    this.gaoList.forEach(ele => {
                        console.log(ele);
                        ele.key = ele.num == 0 ? '无' : this.keyWordList1[ele.num - 1]
                    })
                    this.diList.forEach(ele => {
                        ele.key = ele.num == 0 ? '无' : this.keyWordList2[ele.num - 1]
                    })

                    console.log(this.gaoList);
                    console.log(this.diList);


                    this.resList.forEach(item => {
                        if (item.num == this.num1) {
                            this.result = item
                        }
                    })
                    console.log(this.result);



                    var nameList = [],
                        nNum = [],
                        otherNum = [],
                        nList = ['A', 'E', 'I', 'O', 'U', 'V'],
                        nTotal = 0,
                        oTotal = 0;

                    this.userName.split('').forEach(ele => {
                        nameList.push(this.getPinYin(ele).toUpperCase().split(''))
                        nNum.push(0)
                        otherNum.push(0)
                    })
                    console.log(nameList);
                    var that = this


                    this.numList.forEach(item => {
                        nameList.forEach((nItem, nIndex) => {
                            nItem.forEach(ele => {
                                if (nList.indexOf(ele) != -1) {
                                    item.code.forEach(cItem => {
                                        // console.log('ele' + ele);
                                        // console.log('cItem' + cItem);
                                        // console.log('item' + item.num);

                                        nNum[nIndex] += (ele == cItem ? item.num : 0)
                                        // nNum[nIndex] = that.numHandle(nNum[nIndex])
                                    })
                                } else {
                                    item.code.forEach(cItem => {
                                        if (ele == cItem) {
                                            otherNum[nIndex] += (ele == cItem ? (item.num) : 0)
                                            // otherNum[nIndex] = that.numHandle(otherNum[nIndex])

                                        }
                                    })
                                }
                            })
                        })
                    })
                    console.log(nNum);
                    console.log(otherNum);


                    nNum.forEach((ele, inde) => {
                        nTotal += ele
                        oTotal += otherNum[inde]
                        // this.oTotalAll = this.numHandle(this.oTotalAll += this.numHandle(otherNum[inde]))
                        // this.oTotalAll += this.numHandle(otherNum[inde])
                    })




                    // this.nTotal = nNum.toString().replaceAll(',', '');
                    // this.oTotal = otherNum.toString().replaceAll(',', '');

                    nNum.forEach((ele, inde) => {
                        nTotal += ele
                        oTotal += otherNum[inde]
                        // this.oTotalAll = this.numHandle(this.oTotalAll += this.numHandle(otherNum[inde]))
                        // this.oTotalAll += this.numHandle(otherNum[inde])
                    })




                    // this.nTotal = nNum.toString().replaceAll(',', '');
                    // this.oTotal = otherNum.toString().replaceAll(',', '');

                    this.nTotal = nTotal
                    this.nTotalAll = this.numHandle(nTotal)
                    this.oTotal = oTotal
                    this.oTotalAll = this.numHandle(oTotal)

                    console.log(this.nTotal);
                    console.log(this.oTotal);
                    console.log(this.nTotalAll);
                    console.log(this.oTotalAll);

                    console.log(this.nTotal + '——' + this.nTotalAll);
                    console.log(this.oTotal + '——' + this.oTotalAll);

                },
                numHandle(num) {
                    var num = Math.abs(Number(num))
                    console.log(num);

                    if (num < 1000) {
                        return num < 10 ? num : (num = num.toString(), this.numHandle(num.split('')[0] * 1 + num.split('')[1] * 1))
                    } else {
                        num = num.toString()
                        var num1 = this.numHandle(num.substr(0, 2)), num2 = this.numHandle(num.substr(2, 4))
                        return this.numHandle(num1 + num2)
                    }
                },
                getPinYin(l1) {
                    var l2 = l1.length
                    var I1 = ''
                    var reg = new RegExp('[a-zA-Z0-9]')
                    for (var i = 0; i < l2; i++) {
                        var val = l1.substr(i, 1)
                        var name = this.arraySearch(val, this.pinyin)
                        if (reg.test(val)) {
                            I1 += val
                        } else if (name !== false) {
                            I1 += name
                        }
                    }
                    I1 = I1.replace(/ /g, '-')
                    while (I1.indexOf('--') > 0) {
                        I1 = I1.replace('--', '-')
                    }
                    return I1
                },
                arraySearch(l1) {
                    for (var name in pinyin) {
                        if (pinyin[name].indexOf(l1) !== -1) {
                            return this.ucfirst(name)
                        }
                    }
                    return false
                },
                ucfirst: function (l1) {
                    if (l1.length > 0) {
                        var first = l1.substr(0, 1).toUpperCase()
                        var spare = l1.substr(1, l1.length)
                        return first + spare
                    }
                },

            }
        })
    </script>
</body>

</html>